import React, {Component} from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import { updateManure } from '_redux/actions/manure'
import Scrollbar from 'react-smooth-scrollbar'
import { plantingSeasonCropDelete, getFertilizer } from 'utils/Api'
import delete1 from 'images/index/crop/delete.png'
import { toast } from 'react-toastify'
import AddFer from './AddFer'
import { addDragDrop } from '_redux/actions/dragDrops'
const ferType = '尿素，一铵，二铵，硫酸钾，硫酸锌，硼肥，磷酸二氢钾，芸苔素，氯化钾，菌肥，有机肥，其它'.split('，')
class Manure extends Component {
  addSingFer = (e) => {
    e.preventDefault()

    const { dragDrops: { dragDrop } } = this.props
    for (let dd of dragDrop) {
      if (dd.id === 'addFer') {
        return
      }
    }

    const rect = this.content.getBoundingClientRect()
    const pos = {
      left: rect.left+300,
      top: rect.top-112
    }
    const { 
      updateManure,
      plantingSeasonCropsId,
      update,
      updateNo
    } = this.props
    if (!plantingSeasonCropsId) {
      toast.info('保存作物之后才能添加肥料')
      return
    }
    updateManure({
      id: Date.now(),
    }, plantingSeasonCropsId, update, updateNo, pos)
    this.props.addDragDrop({
      id: 'addFer',
      children: AddFer,
      title: '肥料',
      style: {
        left: rect.left + 300,
        top: rect.top - 112
      }
    })
  }
  deleteFerById = (id) => {
    const fd = new FormData()
    fd.append('id', id)
    plantingSeasonCropDelete(fd)
      .then(({msg}) => {
        if (msg === '200') {
          this.props.updateFertilizers()
        }
      })

  }
  showFerDetail = (id, e) => {
    e.preventDefault()
    const {
      plantingSeasonCropsId,
      update,
      updateNo
    } = this.props
    const rect = this.content.getBoundingClientRect()
    const pos = {
      left: rect.left+300,
      top: rect.top-112
    }
    const fd = new FormData()
    fd.append('id', id)
    getFertilizer(fd)
      .then(({ msg, result }) => {
        if (msg === '200') {
          this.props.updateManure(result, plantingSeasonCropsId, update, updateNo, pos)
          this.props.addDragDrop({
            id: 'addFer',
            children: AddFer,
            title: '肥料',
            style: {
              left: rect.left + 300,
              top: rect.top - 112
            }
          })
        }

      })
  }
  render() {
    return (<div className='warp manure'>
      <div className='warp-title'>
        肥料
      </div>
      <div className='warp-content' >
        <Scrollbar>
          <ul ref={content => this.content = content}>
            {
              this.props.fertilizers.map(fer => <li key={fer.id}>
                <div>
                  <a href='#' onClick={this.showFerDetail.bind(this, fer.id)}>{ferType[Number(fer.category)]}</a>
                  <span>{fer.dosage}公斤/亩</span>
                  <button type='button' className='delete' onClick={this.deleteFerById.bind(this, fer.id)}>
                    <img src={delete1} />
                  </button>
                </div>
              </li>)
            }
          </ul>
        </Scrollbar>
        <button type='button' className='button' onClick={this.addSingFer}>增加肥料</button>
      </div>
    </div>
    )  
  }
}
Manure.propTypes = {
  fertilizers: PropTypes.array,
  disabled: PropTypes.bool,
  manure: PropTypes.object,
  updateManure: PropTypes.func,
  plantingSeasonCropsId: PropTypes.string,
  updateFertilizers: PropTypes.func,
  update: PropTypes.func,
  updateNo: PropTypes.func,
  addDragDrop: PropTypes.func,
  dragDrops: PropTypes.object,
}
// updateSeason
export default connect(({ manure, dragDrops }) => ({
  manure, dragDrops
}), dispatch => ({
  addDragDrop: children => dispatch(addDragDrop(children)),
  updateManure: (result, plantingSeasonCropsId, update, updateNo, pos) => dispatch(updateManure(result, plantingSeasonCropsId, update, updateNo, pos))
}))(Manure)